<template>
    <load-more @load-more="loadMore" height="100vh">
        <div class="score-record">
            <ul class="tabs flex">
                <li class="flex-center" :class="{'active':tabIndex == 2}" @click="changeTab(2)">
                    充值记录
                    <div></div>
                </li>
                <li class="flex-center" :class="{'active':tabIndex == 3}" @click="changeTab(3)">
                    提现记录
                    <div></div>
                </li>
            </ul>
            <ul class="list-box">
                <li v-for="(item,index) in dataList" :key="index"  v-if="!isEmpty">
                    <record-list
                            :logo="item.avatar"
                            :name="item.username"
                            :date="item.createtime"
                            :score="item.money"
                            :type="item.status"
                            :pay_type="tabIndex"
                    ></record-list>
                </li>
            </ul>
            <empty v-if="isEmpty" :imgurl="empty_img" text="暂无记录~"></empty>
        </div>
    </load-more>

</template>

<script>
    import RecordList from "@/components/recordList"
    import Empty from '@/components/empty'
    import LoadMore from '@/components/upload'
    export default {
        name: "scoreRecord",
        components:{
            RecordList,Empty,LoadMore
        },
        data(){
            return {
                tabIndex:2,
                logo: require('../../assets/img/banner.png'),
                isEmpty:false,
                empty_img:require('../../assets/img/record-empty.png'),
                dataList:[],
                has_more:true,
                now_page:1
            }
        },
        mounted(){
          this.getData()
        },
        methods:{
            //上拉加载
            loadMore (func) {
                if(this.has_more){
                    this.now_page += 1;
                    this.getData(this.type,this.now_page)
                    func();
                }
            },
            getData(type = 2,page=1){
                if(page == 1){
                    this.dataList = []
                }
              this.$http.post('user/record',{
                  type:type,
                  page:page
              }).then(res=>{
                  console.log(res)
                  this.dataList = res.data.data;
                  this.has_more = res.data.has_more
                  if(this.dataList.length){
                      this.isEmpty = false;
                  }else{
                      this.isEmpty = true;
                  }
              })
            },
            changeTab(index){
                this.tabIndex = index;
                this.getData(index)
            }
        }
    }
</script>

<style scoped lang="less">
    .score-record{
        .tabs{
            background: white;
            li{
                width: 50%;
                height: 100px;
                font-size: 30px;
                color: #333333;
            }
            .active{
                color:#185fff;
                position: relative;
                div{
                    position: absolute;
                    width: 50px;
                    height: 3px;
                    background: #185fff;
                    bottom:7px;
                }
            }
        }
        .list-box{
            padding:0 30px;
            background: white;
        }
    }
</style>
